<template>
	<div class="login-container">
		<!-- 背景装饰 -->
		<div class="bg-decoration"></div>

		<!-- 登录卡片 -->
		<div class="login-card">
			<!-- 登录标题 -->
			<h2 class="login-title">欢迎登录</h2>

			<!-- 登录表单 -->
			<div class="login-form">
				<!-- 手机号输入 -->
				<div class="reg-form-item">
					<div class="input-wrapper">
						<i class="fa fa-user"></i>
						<input type="text" placeholder="请输入用户名" class="holder-class" v-model="user.username" />
					</div>
					<div class="line"></div>
				</div>

				<!-- 密码输入 -->
				<div class="reg-form-item">
					<div class="input-wrapper">
						<i class="fa fa-lock"></i>
						<input :type="showPassword ? 'text' : 'password'" placeholder="请输入密码" class="holder-class"
							v-model="user.password" />
						<i :class="showPassword ? 'fa fa-eye toggle-password' : 'fa fa-eye-slash toggle-password'"
							@click="togglePasswordVisibility"></i>
					</div>
					<div class="line"></div>
					<span class="forgot-password" @click="navigateToForgotPassword">忘记密码</span>
				</div>

				<!-- 登录按钮 -->
				<div class="reg-form-item">
					<button class="reg-btn" :class="{ disabled: !isFormValid }"
						:style="{ opacity: isFormValid ? 1 : 0.6 }" @click="handleLogin" :disabled="!isFormValid">
						登 录
					</button>
				</div>

				<!-- 其他登录选项 -->
				<div class="login-options">
					<span class="option" @click="navigateToCodeLogin">验证码登录</span>
					<span class="divider"></span>
					<span class="option" @click="navigateToRegister">注册</span>
				</div>

				<!-- 社交登录 -->
				<div class="social-login">
					<span class="social-title">其他方式登录</span>
					<div class="social-icons">
						<div class="social-icon" @click="loginWithWeixin">
							<i class="fa fa-weixin"></i>
						</div>
						<div class="social-icon" @click="loginWithQQ">
							<i class="fa fa-qq"></i>
						</div>
						<div class="social-icon" @click="loginWithWeibo">
							<i class="fa fa-weibo"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		dologin
	} from '@/apis/user'
	export default {
		data() {
			return {
				showPassword: false,
				user: {
					username: '',
					password: ''
				}
			};
		},
		computed: {
			isFormValid() {
				return this.user.username.trim() && this.user.password.trim();
			}
		},
		methods: {
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			handleLogin() {
			  if (!this.isFormValid) return;
			  
			  dologin(this.user.username, this.user.password)
			    .then(res => {
			      console.log('登录成功:', res);
			      // 存储token到本地存储
			      if (res.code===0) {
			        localStorage.setItem('token', res.data);
					setTimeout(() => {
					  this.$router.push('/mine')
					}, 1000);
			      }
			    })
			    .catch(error => {
					console.error('登录失败:', error);
			    });
			},
			navigateToForgotPassword() {
				// 跳转到忘记密码页面
			},
			navigateToCodeLogin() {
				this.$router.push('/codelogin')
			},
			navigateToRegister() {
				this.$router.push('/reg')
			},
			loginWithWeixin() {
				// 微信登录逻辑
			},
			loginWithQQ() {
				// QQ登录逻辑
			},
			loginWithWeibo() {
				// 微博登录逻辑
			}
		}
	};
</script>

<style scoped>
	/* 这里添加你的样式 */
	.login-container {
		position: relative;
		padding: 0;
		margin: 0;
		height: 100%;
		overflow: hidden;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}



	.login-card {
		background: white;
		border-radius: 15px;
		padding: 30px;
		width: 100%;
		max-width: 400px;

	}

	.login-title {
		text-align: center;
		margin-bottom: 30px;
		font-size: 24px;
		font-weight: bold;
	}

	.reg-form-item {
		margin-bottom: 20px;
	}

	.input-wrapper {
		display: flex;
		align-items: center;
		position: relative;
	}

	.input-wrapper i {
		margin-right: 10px;
		color: #888;
	}

	.input-wrapper input {
		flex: 1;
		padding: 12px 0;
		border: none;
		outline: none;
		background: transparent;
	}

	.line {
		height: 1px;
		background: #eee;
		margin-top: 5px;
	}


	.toggle-password {
		position: absolute;
		right: 10px;
		cursor: pointer;
		color: #888;
	}

	.forgot-password {
		display: block;
		text-align: right;
		margin-top: 5px;
		font-size: 12px;
		color: #888;
		cursor: pointer;
	}

	.reg-btn {
		width: 100%;
		padding: 12px;
		background: #880000;
		color: white;
		border: none;
		border-radius: 25px;
		font-size: 16px;
		cursor: pointer;
		transition: opacity 0.3s;
	}

	.reg-btn.disabled {}

	.login-options {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20px 0;
	}

	.option {
		color: #888;
		cursor: pointer;
		font-size: 14px;
	}

	.divider {
		width: 1px;
		height: 14px;
		background: #ddd;
		margin: 0 15px;
	}

	.social-login {
		text-align: center;
		margin-top: 30px;
	}

	.social-title {
		color: #888;
		font-size: 14px;
		margin-bottom: 15px;
		display: block;
	}

	.social-icons {
		display: flex;
		justify-content: center;
		gap: 20px;
	}

	.social-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.social-icon i {
		font-size: 20px;
		color: #555;
	}
</style>